aliases:
  - Obsidian+Publish/Customize+your+site
description: Learn how to customize the appearance and style of your Obsidian Publish site.
permalink: publish/customize
publish: true

Customize your site

This page explains how you can customize how your Obsidian Publish site looks and feels.

Static assets

You can customize your site by publishing the following files to your site:

publish.css to add custom CSS
publish.js to add custom JavaScript
favicon-32x32.png to set the favicon

Notes:

CSS variables for Publish can be found on on our Documentation site.
Since Obsidian doesn't support CSS or JavaScript files, you need to use another application to create and edit them.
Both publish.css and publish.js must be located in the root directory (/) of your vault.
By default, publish.css and publish.js don't appear in the file explorer, but you can still publish them from the Publish changes dialog.
To use custom JavaScript with publish.js, you need to Custom domains.

For favicons, Obsidian Publish supports the following naming conventions, where 32 represents the icon's dimensions in pixels:

favicon-32.png
favicon-32x32.png
favicon.ico

We recommend that you provide one or more of the following dimensions:

favicon-32x32.png
favicon-128x128.png
favicon-152x152.png
favicon-167x167.png
favicon-180x180.png
favicon-192x192.png
favicon-196x196.png

You have flexibility in placing favicons anywhere within the vault, as long as they are published to your site.

Use a community theme

To use one of the community themes for your site:

Open your vault in the default file explorer for your OS.
Go to the vault settings folder (default: .obsidian).
Open the themes folder.
Copy the CSS file for the theme you want to use for your site.
Paste the file into the root folder of your vault.
Rename the CSS file to publish.css.
Publish publish.css.

Notes:

If the style doesn’t update within a few minutes, try refreshing your browser cache.
You can switch between light and dark mode in the site options.
Many community themes use Style Settings for custom styling, but these settings do not work on Obsidian Publish.

Developing themes

Can't find the theme for you? Learn how to Build a Publish theme yourself.

Enable UI features

You can toggle several UI features for your site, such as the graph view or a table of contents.

Browse the available UI features under the Reading experience and Components sections in the site options

Customize navigation

Within Obsidian Publish, you have the ability to customize the navigation order and display of files and folders within the Publish File explorer. Navigation items are listed in published order by default. Notes not published will not appear within this pane.

Accessing Customize navigation options

In Ribbon, select Publish changes () or open the Command palette and type Publish: Publish changes...
In the Publish changes dialog, select Change site options ( ).
Under Components settings, next to Customize navigation, select the manage button.

A new pop-up window titled Navigation will appear over your Change site options window.

Adjust navigation items

In the section labeled Navigation preview, you can adjust the display order of your published content.

Select the folder or note you want to adjust.
Drag the note or folder up or down until it is your desired place.
In the lower right of the Navigation window, select Done.

Publish will send your navigation changes to your site.

Hide and unhide navigation items

If there are notes or folders you have published, but you do not want visible within your Navigation, you can opt to hide those items instead.

Select the folder or note you want to adjust.
Right click and select Hide in navigation. The item should now disappear from the Navigation preview.
In the lower right of the Navigation window, select Done.

Publish will send your navigation changes to your site.

You can Show hidden files by selecting the checkbox to the right of the Navigation Preview title

FAQ

Can I move files from one folder to another within the Navigation?

No. The file navigation structure for notes within folders needs to be maintained. You can adjust note order within folders (including the vault root), and folder order within other folders.

Can I edit the order of multiple notes and folders before selecting Done?

Yes.

How do I revert these changes?

Display order: Select the Restore Default icon (counter clockwise rotate arrow) next to Navigation item display order. This will restore your navigation items to alphabetical order.
Hidden status: Select the Restore Default icon (counter clockwise rotate arrow) next to Hide pages or folders from navigation. This will restore your hidden navigation items to a visible state.